<template>
  <div id="homeSearchBar">
    <div id="searchTitle">
      营&nbsp;养&nbsp;搜&nbsp;索
    </div>
    <table id="searchImgTable" cellspacing="0" cellpadding="1" border="0">
      <td width="25%">
        <el-popover
            ref="popover"
            placement="bottom"
            title="肉类"
            width="200"
            trigger="hover"
            :content=content1>
        </el-popover>
        <img v-popover:popover src="../../../../assets/img/home/searchImg1.png" alt="">
      </td>
      <td width="25%">
        <el-popover
            ref="popover2"
            placement="bottom"
            title="水果"
            width="200"
            trigger="hover"
            :content=content2>
        </el-popover>
        <img v-popover:popover2 src="../../../../assets/img/home/searchImg2.png" alt="">
      </td>
      <td width="25%">
        <el-popover
            ref="popover3"
            placement="bottom"
            title="蔬菜"
            width="200"
            trigger="hover"
            :content=content3>
        </el-popover>
        <img v-popover:popover3 src="../../../../assets/img/home/searchImg3.png" alt="">
      </td>
      <td width="25%">
        <el-popover
            ref="popover4"
            placement="bottom"
            title="番茄"
            width="200"
            trigger="hover"
            :content=content4>
        </el-popover>
        <img v-popover:popover4 src="../../../../assets/img/home/searchImg4.png" alt="">
      </td>
    </table>
    <div id="searchContent">
      <img src="../../../../assets/img/home/robotImg.jpg" alt="">
      <div id="searchInput">
        <el-input
            type="textarea"
            v-model="textarea"
            :rows="2"
            placeholder="请输入您要查询的内容">
        </el-input>
      </div>
      <el-button icon="el-icon-search" id="searchSubmit" type="success" plain @click="homeSearchAnswer">查询</el-button>
    </div>
  </div>
</template>

<script>
  import {intelligentAnswer} from "@/network/home/intelligentAnswer";

  export default {
    name: "HomeSearchBar",
    data() {
      return {
        textarea: '',
        content1: '肉类含蛋白质丰富，一般在10-20%之间。瘦肉比肥肉含蛋白质多。肉类食品含蛋白质是优质蛋白质，不仅含有的必需氮基酸全面、数量多，而且比例恰当，接近于人体的蛋白质，容易消化吸收。\n' +
                  '肉类中脂肪含量平均在10-30%左右，主要是各种脂肪酸和甘油三脂。\n' +
                  '肉类约含有1%左右无机盐，瘦肉中较多，特别是脏器内含量很丰富。如100克猪肝中含铁为25毫克，牛肝含5毫克。' ,
        content2: '猕猴桃、鲜枣、草莓、枇杷、橙、橘、柿子、蓝莓等含有丰富的维生素C。以100克水果的维生素C的含量来计算，猕猴桃含420毫克，鲜枣含380毫克，草莓含80毫克，橙含49毫克，枇杷含36毫克，橘、柿子各含30毫克。' +
                  '香蕉，桃子各含10毫克，葡萄、无花果、苹果各自只有5毫克，梨仅含4毫克。在各种维生素中，叶酸与DNA的生成有关，怀孕初期，叶酸对细胞繁殖与修复很重要，它帮助胚胎神经系统的良好发育，预防孕妇贫血。',
        content3: '蔬菜的营养物质主要包含矿物质、维生素、纤维等，这些物质的含量越高，蔬菜的营养价值也越高。此外，蔬菜中的水分和膳食纤维的含量也是重要的营养品质指标。通常，水分含量高、膳食纤维少的蔬菜鲜嫩度较好，其食用价值也较高。' +
                  '但从保健的角度来看，膳食纤维也是一种必不可少的营养素。据国际物质粮农组织1990年统计，人体必需的维生素C的90%、维生素A的60%来自蔬菜。',
        content4: '番茄属分为有色番茄亚种和绿色番茄亚种。前者果实成熟时有多种颜色，后者果实成熟时为绿色。番茄属由普通栽培种番茄及与栽培种番茄有密切关系的几个种组成，大体上又分为普通番茄和秘鲁番茄两个复合体种群。' +
                  '普通番茄群中包括：普通番茄、细叶番茄、奇士曼尼番茄、小花番茄和奇美留斯凯番茄、多毛番茄；秘鲁番茄群中包括智利番茄和秘鲁番茄。',
        
      }
    },
    methods: {
      homeSearchAnswer() {
        let question = this.textarea;
        // eslint-disable-next-line no-console
        console.log(question);
        intelligentAnswer(question).then(res => {
          // eslint-disable-next-line no-console
          console.log(res);
          if (res.code === '1') {
            let answer = res.answer;
            // eslint-disable-next-line no-console
            // console.log(answer);
            this.$alert(answer, '您的回答', {
              confirmButtonText: '确定',
              callback: action => {
                this.$message({
                  type: 'info',
                  message: `action: ${ action }`
                });
              }
            });

          }else {
            alert("查询失败");
          }
        }).catch(err => {
          // eslint-disable-next-line no-console
          console.log(err);
        })
      },
      test(answer) {
        let answerSize = answer.length;
        let danguchun = '';
        let num1 ,num2;
        for (let i = 0; i < answerSize; i++) {
          if (answer[i] === '胆' && answer[i+1] === '固' && answer[i+2] === '醇') {
            num1 = i+17;
            // eslint-disable-next-line no-console
            console.log(num1);
            break;
          }
        }
        if(answer[num1] === '-' || answer[num1] === 'T' || answer[num1] === 'u') {
          danguchun = 0;
        } else {
          for (let j = num1+1; j < num1+10; j++) {
            if (answer[j] === 'm' && answer[j+1] === 'g') {
              num2 = j-1;
              break;
            }
          }
          // eslint-disable-next-line no-console
          console.log(num2);
          for (let k = num1; k <= num2; k++) {
            danguchun += answer[k];
          }
        }
        // eslint-disable-next-line no-console
        console.log(danguchun);
      },
    },
  }
</script>

<style scoped>
  #homeSearchBar {
    position: absolute;
    top: 102%;
    width: 100%;
    height: 130%;
    background-color: #fff;
  }
  #searchTitle {
    position: relative;
    top: 6%;
    left: 46%;
    width: 150px;
    height: 40px;
    font-size: 30px;
    border-bottom: 1px solid #67C23A;
    font-weight: bold;
  }
  #searchImgTable {
    position: relative;
    top: 8%;
    width: 70%;
    height: 20%;
    left: 15%;
  }
  #searchImgTable td img {
    position: relative;
    bottom: 5%;
    width: 90%;
    left: 5%;
    height: 90%;
    background-color: #fff;
    box-shadow: -12px 12px 12px rgba(0, 0, 0, 0.2);
    /*border: 1px solid;*/
  }
  #searchContent {
    position: absolute;
    top: 45%;
    width: 80%;
    height: 35%;
    left: 10%;
    /*border: 1px solid;*/
    box-shadow: -12px 12px 12px rgba(0, 0, 0, 0.2);
    border-radius: 10px;
  }
  #searchContent img {
    position: absolute;
    top: 10%;
    width: 15%;
    left: 12%;
    /*border: 1px solid;*/
  }
  #searchInput {
    position: absolute;
    top: 25%;
    left: 31%;
    width: 50%;
    border: 1px solid #67C23A;
    border-radius: 5px;
  }
  #searchSubmit {
    position: absolute;
    top: 49%;
    right: 19%;
  }
</style>